<template>
  <back-item :title="title"></back-item>
  <div
    class="animated fadeInLeft"
    style="margin-top: 60px; background: #f8f8f8; height: calc(100vh - 60px)"
  >
    <!-- 用户设置 -->
    <div style="padding: 10px">
      <div class="item" @click="openFind">
        <div>找回密码</div>
        <div>
          <el-icon><ArrowRightBold /></el-icon>
        </div>
      </div>
      <div class="item" @click="openBind">
        <div>绑定邮箱</div>
        <div>
          <el-icon><ArrowRightBold /></el-icon>
        </div>
      </div>
      <!-- <div class="item">
        <div>修改信息</div>
        <div>
          <el-icon><ArrowRightBold /></el-icon>
        </div>
      </div> -->
      <div class="item" @click="logout">
        <div>退出登录</div>
        <div>
          <el-icon><ArrowRightBold /></el-icon>
        </div>
      </div>
    </div>
  </div>
  <find-pass ref="findRef" @code="onGetCode" @submit="onSubmit"></find-pass>
  <bind-email ref="bindRef" @code="onGetCode" @submit="onBind"></bind-email>
</template>

<script setup>
import backItem from "@/components/other/back-item.vue";
import { ArrowRightBold } from "@element-plus/icons-vue";
import findPass from "@/components/other/find-pass.vue";
import bindEmail from "@/components/other/bind-email.vue";
import { ref } from "vue";
import { ElMessage } from "element-plus";
import request from "@/assets/js/request";
import { useRouter } from "vue-router";

const title = ref("设置");

const findRef = ref();
const bindRef = ref();
const router = useRouter();

const openFind = () => {
  findRef.value.open();
};
const openBind = () => {
  bindRef.value.open();
};

const onGetCode = (email) => {
  if (email === "" || email === null) {
    ElMessage.warning("抱歉，邮箱不能为空~");
    return;
  }

  request
    .get(`/mail/captcha?mail=${email}`)
    .then((res) => {
      if (res.code === 200) {
        ElMessage.success("发送成功，注意查收");
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};

// 找回密码
const onSubmit = (data) => {
  request
    .post("/client/user/find-pass", data)
    .then((res) => {
      if (res.code === 200) {
        ElMessage.success("修改成功");
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};

const logout = () => {
  localStorage.clear();
  router.push("/");
};

const onBind = (data) => {
  request
    .get(`/client/user/bind-email?email=${data.email}&code=${data.code}`)
    .then((res) => {
      if (res.code === 200) {
        ElMessage.success("绑定成功");
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};
</script>

<style scoped lang="scss">
.item {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px #c9c8c8 solid;
  padding: 0 10px;

  &:hover {
    cursor: pointer;
    background: #c9c8c8;
  }
}
</style>
